<template>
  <div class="register">
    <span @click="gotoLogin">&lt;</span>
    <h1>注册页面</h1>
     <div class="center">
       <div>
         <input placeholder="请输入账号" v-model="number" @input="changeNumber">
         <span>{{numberTip}}</span>
       </div>
       <div>
         <input placeholder="请输入密码" v-model="password" type="password">
         <span>{{passwordTip}}</span>
       </div>
       <div>
         <input placeholder="请确认密码" v-model="passAgain" @input="changePassword" type="password">
         <span>{{againTip}}</span>
       </div>
         <div>
           <input placeholder="请输入用户名称" v-model="username">
           <span>{{nameTip}}</span>
         </div>
         <div>
           <input placeholder="请输入手机号" v-model="phone" @input="changeTel">
           <span>{{phoneTip}}</span>
         </div>
     </div>
    <div class="btn_res">
      <button :disabled="disabled" @click="addUser">注册</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return{
      number:'',
      password:'',
      passAgain:'',
      username:'',
      phone:'',
      disabled:true,
      btnBg:false,
      phoneTip:'',
      numberTip:'',
      passwordTip:'',
      againTip:'',
      nameTip:''
    }
  },
  methods:{
    changeTel(e){
      this.phone=e.target.value;
      this.phoneTip='1开头的11位数字'
      let regtel= /^1[0-9]{10}$/;
      if (regtel.test(this.phone)){
        this.btnBg=true;
        this.disabled=false;
        this.phoneTip=''
      }else {
        this.btnBg=false;
        this.disabled=true;
      }
    },
    changeNumber(e){
      this.number=e.target.value;
      this.numberTip='大于3个字符'
      if (this.number.length>=3){
        this.numberTip=''
      }
    },
    changePassword(e){
      this.passAgain=e.target.value;
      this.againTip='与上面密码要相同'
      if (this.password==this.passAgain){
        this.againTip=''
      }
    },
    addUser(){
      let _User={
        number:this.number,
        password: this.password,
        username:this.username,
        phone:this.phone
      }
      axios.post('http://localhost:9999/addUser',_User).then((res)=>{
        if (res.data.code==200){
          this.$router.push('/sign')
        }else {
          alert('注册失败')
        }
      })
    },
    gotoLogin(){
      this.$router.push('/sign')
    }
  }


}
</script>

<style scoped>
/*h1{*/
/*  text-align: center;*/
/*}*/
.register span:nth-child(1){
  font-size: 50px;
}
/*.center{*/
/*  text-align: center;*/
/*}*/
/*.btn_res{*/
/*  text-align: center;*/
/*}*/
.center span{
  color: #cccccc;
}
</style>